<template>
  <div class="help-container">
    <div class="help-header">
      <h1 class="help-title">AiQuestions 使用指南</h1>
      <div class="help-subtitle">全面了解系统功能，提升您的使用体验</div>
    </div>
    
    <div class="help-section">
      <div class="section-header">
        <div class="section-icon"><i class="el-icon-info-filled"></i></div>
        <h2>系统概述</h2>
      </div>
      <div class="section-content">
        <p class="intro-text">
          AiQuestions是一款基于人工智能技术的智能出题系统，旨在为教育工作者提供高效便捷的题库管理与试卷生成工具。系统通过先进的大语言模型自动从教材内容中提取知识点，构建结构化的知识图谱数据库，并基于这些知识图谱智能生成多样化的试题。
        </p>
        <p class="intro-text">
          本系统集成了知识图谱可视化管理、学科管理、题库管理、智能组卷以及数据统计分析等功能模块，能够显著减轻教师的备课工作负担，提高教学资源的生成效率和质量，同时为学生提供针对性的练习资源。
        </p>
        <p class="intro-text">
          特别的，系统支持多种主流AI模型，包括Deepseek、KIMI和QianWen，您可以根据需求自由选择使用不同的模型进行试题生成，获得最佳的生成效果。
        </p>
        <div class="image-container">
          <img class="feature-image" src="../assets/help/introduce.png" alt="系统概述"/>
        </div>
      </div>
    </div>
    
    <div class="help-section">
      <div class="section-header">
        <div class="section-icon"><i class="el-icon-menu"></i></div>
        <h2>功能指南</h2>
      </div>
      
      <div class="feature-card">
        <div class="feature-header">
          <div class="feature-number">01</div>
          <h3>用户注册与登录</h3>
        </div>
        <div class="feature-content">
          <p>首次使用系统需要完成用户注册流程，填写必要的个人信息并设置安全密码。已注册用户可直接使用账号密码登录系统，开始使用各项功能。系统会记住您的登录状态，提供持续的服务体验。</p>
          <div class="image-container">
            <img class="feature-image" src="../assets/help/login.png" alt="登录界面"/>
          </div>
        </div>
      </div>
      
      <div class="feature-card">
        <div class="feature-header">
          <div class="feature-number">02</div>
          <h3>首页功能</h3>
        </div>
        <div class="feature-content">
          <p>在系统首页，您可以选择需要操作的学科（请注意：首次使用时需要先在学科管理界面创建学科）。选定学科后，您可以上传教材内容文件，支持多种格式如.txt、.doc、.docx、.pdf等。</p>
          <p>系统会自动解析上传的文件内容，并通过AI技术分析提取知识点，构建知识图谱。需要注意的是，当文档内容较大时，处理过程可能需要较长时间，请耐心等待。知识图谱生成完成后，您可以点击相应入口，进入知识图谱管理界面，进行后续的知识图谱管理和试题生成操作。</p>
          <div class="image-grid">
            <div class="image-container">
              <img class="feature-image" src="../assets/help/home.png" alt="首页界面"/>
            </div>
            <div class="image-container">
              <img class="feature-image" src="../assets/help/home2.png" alt="文件上传界面"/>
            </div>
          </div>
        </div>
      </div>
      
      <div class="feature-card">
        <div class="feature-header">
          <div class="feature-number">03</div>
          <h3>知识图谱管理</h3>
        </div>
        <div class="feature-content">
          <p><strong>知识图谱可视化与管理</strong></p>
          <p>系统提供了两种知识图谱展示视图：图形化视图和表格视图。图形化视图直观展示知识点之间的层级关系和连接，表格视图则便于数据的批量处理。您可以通过这些视图对知识点进行全面管理，包括添加、编辑、删除和查询等操作。</p>
          <p>系统还支持知识图谱的批量导入功能，您可以输入教材文本内容，系统会自动解析并提取知识点，构建结构化的知识图谱数据库。</p>
          <div class="image-grid">
            <div class="image-container">
              <img class="feature-image" src="../assets/help/graph1.png" alt="图形化视图"/>
            </div>
            <div class="image-container">
              <img class="feature-image" src="../assets/help/graph2.png" alt="表格视图"/>
            </div>
          </div>
          
          <p><strong>智能试题生成</strong></p>
          <p>基于构建的知识图谱，系统可以智能生成各类型试题。您可以选择特定学科的章节或知识点，系统会将相关内容导出为文本，您可以对导出内容进行编辑和优化。随后，将处理好的内容放入试题生成区，设置生成规则（如题型、难度等），系统将自动生成对应的试题。</p>
          <p>在试题预览区，您可以查看生成的试题，进行筛选和评估，并决定是否将满意的试题保存到题库中（注意：保存前需要先建立相应的题库）。</p>
          <div class="image-container">
            <img class="feature-image" src="../assets/help/graph3.png" alt="试题生成界面"/>
          </div>
        </div>
      </div>
      
      <div class="feature-card">
        <div class="feature-header">
          <div class="feature-number">04</div>
          <h3>学科与题库管理</h3>
        </div>
        <div class="feature-content">
          <p><strong>学科管理</strong></p>
          <p>学科是系统组织内容的基本单位。在学科管理界面，您可以创建新学科、修改现有学科信息或删除不需要的学科。请注意，知识图谱生成和试题生成功能都需要基于已创建的学科进行，因此在使用这些功能前，请确保已创建好相应的学科。</p>
          <div class="image-container">
            <img class="feature-image" src="../assets/help/subject1.png" alt="学科管理界面"/>
          </div>
          
          <p><strong>题库管理</strong></p>
          <p>系统支持按学科组织题库，每个学科下可以创建多个题库。您可以通过学科入口进入对应的题库管理界面，在这里可以创建新题库、修改题库信息或删除不需要的题库。</p>
          <p>点击具体题库，可以进入试题管理页面，这里提供了强大的试题管理功能，包括按类型分类查看、关键词搜索、以及对试题的增加、删除、修改和查询等操作。同时，系统还支持试题的批量导出功能，方便您在其他环境中使用这些试题资源。</p>
          <div class="image-grid">
            <div class="image-container">
              <img class="feature-image" src="../assets/help/subject2.png" alt="题库列表"/>
            </div>
            <div class="image-container">
              <img class="feature-image" src="../assets/help/subject3.png" alt="试题管理"/>
            </div>
          </div>
        </div>
      </div>
      
      <div class="feature-card">
        <div class="feature-header">
          <div class="feature-number">05</div>
          <h3>试卷管理与组卷</h3>
        </div>
        <div class="feature-content">
          <p><strong>试卷管理</strong></p>
          <p>系统提供全面的试卷管理功能，您可以查看所有已创建的试卷，按学科进行分类查看，对试卷进行预览、编辑、删除和导出等操作。导出功能支持多种格式，方便您将试卷用于打印或线上发布。</p>
          <div class="image-container">
            <img class="feature-image" src="../assets/help/paper1.png" alt="试卷管理界面"/>
          </div>
          
          <p><strong>智能组卷</strong></p>
          <p>系统提供两种试卷创建方式：规则创建和手动创建，满足不同场景的需求。</p>
          <div class="image-container">
            <img class="feature-image" src="../assets/help/paper2.png" alt="组卷方式选择"/>
          </div>
          
          <p><strong>规则创建</strong>：您可以设定组卷规则，如各类题型的数量、总分、难度分布等，并选择多个题库作为试题来源。系统会根据您设定的规则，自动从选中的题库中筛选符合条件的试题，组成完整试卷。特别的，系统支持一次性生成多套试卷，且保证各套试卷之间的重复率不超过25%，非常适合需要生成多套平行试卷的场景。</p>
          <div class="image-container">
            <img class="feature-image" src="../assets/help/paper4.png" alt="规则创建界面"/>
          </div>
          
          <p><strong>手动创建</strong>：如果您需要对试卷内容有更精确的控制，可以选择手动创建方式。在手动创建界面，您可以浏览题库中的试题，按条件筛选，选择需要的试题添加到试卷中。同时，系统也支持在组卷过程中直接新增试题，为您提供最大的灵活性。</p>
          <div class="image-container">
            <img class="feature-image" src="../assets/help/paper3.png" alt="手动创建界面"/>
          </div>
        </div>
      </div>
      
      <div class="feature-card">
        <div class="feature-header">
          <div class="feature-number">06</div>
          <h3>统计分析</h3>
        </div>
        <div class="feature-content">
          <p>系统提供全面的数据统计分析功能，通过直观的图表和数据展示，帮助您了解系统当前状态和资源分布情况。统计分析模块涵盖了学科数量、知识点分布、题库数量、试题分类、难度分布等多个维度的数据，让您对教学资源有清晰的整体认识。</p>
          <p>通过这些分析数据，您可以及时发现知识覆盖的不均衡之处，调整资源分配，优化教学内容的组织和安排，提高教学效果。</p>
          <div class="image-grid">
            <div class="image-container">
              <img class="feature-image" src="../assets/help/statistic1.png" alt="统计分析界面1"/>
            </div>
            <div class="image-container">
              <img class="feature-image" src="../assets/help/statistic2.png" alt="统计分析界面2"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="help-section">
      <div class="section-header">
        <div class="section-icon"><i class="el-icon-question-filled"></i></div>
        <h2>常见问题</h2>
      </div>
      <div class="faq-container">
        <div class="faq-item" v-for="(item, index) in faqList" :key="index">
          <div class="faq-question" @click="toggleFaq(index)">
            <span class="question-text">{{ item.question }}</span>
            <span class="toggle-icon" :class="{'is-open': item.isOpen}">
              {{ item.isOpen ? '−' : '+' }}
            </span>
          </div>
          <div class="faq-answer" :class="{'is-open': item.isOpen}">
            <p>{{ item.answer }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- <div class="help-section">
      <div class="section-header">
        <div class="section-icon"><i class="el-icon-message"></i></div>
        <h2>联系与支持</h2>
      </div>
      <div class="contact-container">
        <p>如果您在使用过程中遇到任何问题，或有改进建议，请随时与我们联系。我们的技术支持团队将竭诚为您服务。</p>
        <div class="contact-methods">
          <div class="contact-method">
            <div class="contact-icon"><i class="el-icon-email"></i></div>
            <div class="contact-detail">
              <h4>电子邮件</h4>
              <p>support@aiquestions.com</p>
            </div>
          </div>
          <div class="contact-method">
            <div class="contact-icon"><i class="el-icon-phone"></i></div>
            <div class="contact-detail">
              <h4>技术支持热线</h4>
              <p>400-123-4567（工作日 9:00-18:00）</p>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    
    <!-- 图片预览弹窗 -->
    <div class="image-preview-modal" v-if="showPreview" @click="closePreview">
      <div class="preview-content" @click.stop>
        <img :src="previewImage" alt="预览图片" class="preview-image">
        <div class="preview-close" @click="closePreview">×</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// FAQ列表数据
const faqList = ref([
  {
    question: '如何修改我的账户信息？',
    answer: '您可以在系统右上角点击用户头像，在下拉菜单中选择"个人中心"，进入后可找到"账户设置"选项。在此页面，您可以修改个人信息、更新头像和修改密码等操作。修改完成后，请点击"保存"按钮确认更改。',
    isOpen: false
  },
  {
    question: '系统支持哪些类型的题目生成？',
    answer: '目前系统支持六种常见题型的智能生成：单选题、多选题、填空题、判断题、简答题和综合题。每种题型都可以设置不同的难度级别和知识点关联，满足多样化的教学需求。未来版本我们将考虑增加更多题型支持，如匹配题、排序题等。',
    isOpen: false
  },
  {
    question: '生成速度较慢如何解决？',
    answer: '生成知识图谱或试题时，如果输入内容过多，AI模型分析处理需要较长时间。建议您：1) 尝试将大型文档分成几个小部分，分批进行处理；2) 选择处理速度较快的AI模型；3) 在网络状况良好时进行大规模生成操作。此外，我们的系统已采用流式返回技术优化试题输出体验，让您在等待的过程中也能看到实时生成结果。',
    isOpen: false
  },
  {
    question: '如何提高生成试题的质量？',
    answer: '提高试题质量的关键在于提供高质量的知识图谱和明确的生成指令。建议您：1) 确保上传的教材内容准确完整；2) 对自动生成的知识图谱进行人工审核和优化；3) 在生成试题时提供详细的要求说明，如难度、题型、考查知识点等；4) 尝试不同的AI模型，选择效果最佳的模型进行生成。',
    isOpen: false
  },
  {
    question: '系统是否支持协作功能？',
    answer: '目前系统主要面向单用户设计，暂不支持多用户协作编辑同一份试卷或题库的功能。但您可以通过导出功能将试卷或题库导出，与同事分享。我们正在规划未来版本中加入协作功能，敬请期待。',
    isOpen: false
  }
]);

// 图片预览功能
const showPreview = ref(false);
const previewImage = ref('');

// 打开图片预览
const openPreview = (imageSrc) => {
  previewImage.value = imageSrc;
  showPreview.value = true;
  // 禁止背景滚动
  document.body.style.overflow = 'hidden';
};

// 关闭图片预览
const closePreview = () => {
  showPreview.value = false;
  // 恢复背景滚动
  document.body.style.overflow = 'auto';
};

// 切换FAQ展开/收起状态
const toggleFaq = (index) => {
  faqList.value[index].isOpen = !faqList.value[index].isOpen;
};

// 全局事件监听
const handleKeyDown = (event) => {
  // 按ESC键关闭预览
  if (event.key === 'Escape' && showPreview.value) {
    closePreview();
  }
};

// 生命周期钩子
onMounted(() => {
  // 为所有图片添加点击事件
  setTimeout(() => {
    const images = document.querySelectorAll('.feature-image');
    images.forEach(img => {
      img.style.cursor = 'zoom-in';
      img.addEventListener('click', () => openPreview(img.src));
    });
  }, 500);
  
  // 添加键盘事件监听
  window.addEventListener('keydown', handleKeyDown);
  
  console.log('帮助文档组件已加载');
});

// 组件卸载前清理事件监听
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown);
});

</script>

<style scoped>
.help-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
  background-color: #f9fafc;
  line-height: 1.6;
}

/* 头部样式 */
.help-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}

.help-title {
  font-size: 2.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.help-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, #3498db, #5eaade);
  border-radius: 2px;
}

.help-subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  max-width: 700px;
  margin: 0 auto;
}

/* 区块样式 */
.help-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.help-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  background: linear-gradient(to right, #f8f9fa, #edf2f7);
  border-bottom: 1px solid #eaedf0;
}

.section-icon {
  background: #3498db;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 18px;
}

.section-header h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin: 0;
  font-weight: 600;
}

.section-content {
  padding: 30px;
}

/* 特性卡片样式 */
.feature-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 30px;
  overflow: hidden;
  border: 1px solid #eaedf0;
  transition: all 0.3s ease;
}

.feature-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.feature-header {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  background: #f8f9fa;
  border-bottom: 1px solid #eaedf0;
}

.feature-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: #3498db;
  margin-right: 15px;
  opacity: 0.8;
}

.feature-header h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin: 0;
  font-weight: 600;
}

.feature-content {
  padding: 25px 30px;
}

.feature-content p {
  margin-bottom: 20px;
  color: #505964;
  font-size: 16px;
  line-height: 1.7;
}

.feature-content p:last-child {
  margin-bottom: 0;
}

.feature-content strong {
  color: #2c3e50;
  font-weight: 600;
}

.intro-text {
  font-size: 16px;
  line-height: 1.8;
  color: #505964;
  margin-bottom: 20px;
}

/* 图片样式 */
.image-container {
  margin: 25px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  position: relative;
}

.feature-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.image-container:hover .feature-image {
  transform: scale(1.02);
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 25px 0;
}

/* FAQ样式 */
.faq-container {
  padding: 20px 30px;
}

.faq-item {
  margin-bottom: 15px;
  border: 1px solid #eaedf0;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.faq-question {
  padding: 18px 25px;
  background-color: #f8f9fa;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: #edf2f7;
}

.question-text {
  font-weight: 600;
  color: #2c3e50;
  font-size: 16px;
}

.toggle-icon {
  font-size: 20px;
  color: #3498db;
  transition: transform 0.3s ease;
}

.toggle-icon.is-open {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  background-color: #fff;
}

.faq-answer.is-open {
  max-height: 500px;
  padding: 20px 25px;
  border-top: 1px solid #eaedf0;
}

.faq-answer p {
  margin: 0;
  color: #505964;
  font-size: 15px;
  line-height: 1.7;
}

/* 联系方式样式 */
.contact-container {
  padding: 30px;
}

.contact-container p {
  color: #505964;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 25px;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.contact-method {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.contact-method:hover {
  background: #edf2f7;
  transform: translateY(-5px);
}

.contact-icon {
  background: #3498db;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.contact-detail h4 {
  font-size: 17px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 5px 0;
}

.contact-detail p {
  font-size: 15px;
  color: #505964;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-methods {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .help-container {
    padding: 20px 15px;
  }
  
  .help-title {
    font-size: 2rem;
  }
  
  .help-subtitle {
    font-size: 1rem;
  }
  
  .section-header {
    padding: 15px 20px;
  }
  
  .section-content, 
  .feature-content,
  .faq-container,
  .contact-container {
    padding: 20px;
  }
  
  .feature-header {
    padding: 15px 20px;
  }
  
  .feature-number {
    font-size: 1.5rem;
  }
  
  .feature-header h3 {
    font-size: 1.3rem;
  }
}

/* 图片预览样式 */
.image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.preview-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  animation: zoomIn 0.3s ease;
}

.preview-image {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 4px;
  object-fit: contain;
}

.preview-close {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.preview-close:hover {
  background-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

/* 为图片添加提示 */
.feature-image {
  cursor: zoom-in;
}

.image-container::after {
  content: '点击查看大图';
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover::after {
  opacity: 1;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zoomIn {
  from { 
    opacity: 0;
    transform: scale(0.9);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}
</style>